/* eslint-disable guard-for-in */
/* eslint-disable no-param-reassign */
/* eslint-disable consistent-return */
/* eslint-disable no-nested-ternary */
/* eslint-disable eqeqeq */
import React from 'react';
import { DownOutlined, ExclamationCircleOutlined, PlusOutlined, UpOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Input,
  Select,
  DatePicker,
  message,
  Row,
  Col,
  Modal,
  Tabs,
  Divider,
  Badge,
  Dropdown,
  Menu,
} from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import queryString from 'query-string';
import router from 'umi/router';
import styles from '@/utils/utils.less';
import Authorized from '@/utils/Authorized';
import { checkPermissions } from '@/utils/authority';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import downloadFile, { urlParse } from '@/utils/utils';
import TextOverFlow from '../../components/TextOverFlow';
import Customer from '../../components/Customer';
import HOCSelect from '@/components/AntDesign/Select';

const { Option } = Select;
const { TextArea } = Input;
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { confirm } = Modal;
const { TabPane } = Tabs;

@connect(({ publicdata, login, onebilling, loading }) => ({
  login,
  onebilling,
  data: onebilling.data,
  activeKey: onebilling.activeKey,
  loading: loading.models.onebilling,
  formFieldsValue: onebilling.formFieldsValue,
  expandForm: onebilling.expandForm,
  dictCode: publicdata.dictCode,
}))
@Form.create()
class CustomerInfoManage extends React.Component {
  state = {
    tabList: [{ name: '向客户收费' }, { name: '向雇员收费' }, { name: '向供应商收费' }],
    statusList: [], // 状态
    selectedRows: [],
    selectedRowKeys: [],
    tabStatus: '2', // 页签
    activeKey: '2',
    modalVisible: false, // 控制作废弹框显示隐藏
    tovoidRecord: {}, // 选中的一条数据
    feeStaId: '', // 年月
    isfmmanage: 2, // 控制跳不同的详情或修改
    ischargemanage: 2, // 控制跳不同的详情或修改
    isSign: false, // 标记已收费完成时提示弹框显隐
  };

  componentDidMount = () => {
    const {
      dispatch,
      data: { pagination },
      location,
      activeKey,
      form,
    } = this.props;
    const { isMenuLink } = queryString.parse(location.search);
    const { queryParam } = location;
    if (isMenuLink === 'true') {
      this.resetAndGeLlist(location);
    } else {
      let activeKeys = null;
      if (checkPermissions('cs:onceCust:listCust')) {
        activeKeys = urlParse(location.search).activeKey
          ? urlParse(location.search).activeKey
          : '2';
      } else {
        activeKeys = urlParse(location.search).activeKey
          ? urlParse(location.search).activeKey
          : '1';
      }
      dispatch({
        type: 'onebilling/updateModelData',
        payload: {
          activeKey: activeKeys,
          tabStatus: activeKeys,
        },
      });

      this.setState({ activeKey: activeKeys, tabStatus: activeKeys });
      if (queryParam) {
        if (queryParam.name || queryParam.empName) {
          dispatch({
            type: 'publicdata/getCustList',
            payload: [{ custId: queryParam.custId, name: queryParam.name }],
          });
          form.setFieldsValue({ custId: queryParam.custId, empName: queryParam.empName });
        }
        dispatch({
          type: 'onebilling/updateModelData',
          payload: {
            formFieldsValue: queryParam,
            expandForm: true,
          },
        });
      }
      this.getList(pagination.current, pagination.pageSize, activeKey, queryParam);
    }
    dispatch({
      type: 'oncechargecs/updateModelData',
      payload: {
        suppDataList: {
          // 列表数据
          list: [],
          pagination: {
            current: 1,
            pageSize: 10,
            total: 0,
          },
        },
      },
    });
    let activeKeys = null;
    if (checkPermissions('cs:onceCust:listCust')) {
      activeKeys = urlParse(location.search).activeKey ? urlParse(location.search).activeKey : '2';
    } else {
      activeKeys = urlParse(location.search).activeKey ? urlParse(location.search).activeKey : '1';
    }
    dispatch({
      type: 'onebilling/updateModelData',
      payload: {
        activeKey: activeKeys,
        tabStatus: activeKeys,
      },
    });
    this.getList(pagination.current, pagination.pageSize, activeKeys, queryParam);
    this.setState({ activeKey: activeKeys, tabStatus: activeKeys });

    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['ONCE_FEE_STATUS'],
      callback: res => {
        if (res.ONCE_FEE_STATUS) {
          res.ONCE_FEE_STATUS.map(status => {
            switch (status.itemCode) {
              case '1':
                // eslint-disable-next-line no-return-assign
                return (status.statusStyle = 'default'); // 待收费
              case '2':
                // eslint-disable-next-line no-return-assign
                return (status.statusStyle = 'success'); // 已发财务
              case '3':
                // eslint-disable-next-line no-return-assign
                return (status.statusStyle = 'success'); // 已认领
              case '4':
                // eslint-disable-next-line no-return-assign
                return (status.statusStyle = 'success'); // 已收费
              case '5':
                // eslint-disable-next-line no-return-assign
                return (status.statusStyle = 'error'); // 已作废
              default:
                // eslint-disable-next-line no-return-assign
                return (status.statusStyle = '');
            }
          });
          this.setState({ statusList: res.ONCE_FEE_STATUS });
        } else {
          message.warning(`${res.message || '暂无数据！'}`);
        }
      },
    });

    const urlArr = window.location.href.split('/');
    // eslint-disable-next-line array-callback-return
    urlArr.map(item => {
      if (item === 'fmmanage') {
        this.setState({
          isfmmanage: 1,
        });
      } else if (item === 'chargemanage') {
        this.setState({
          ischargemanage: 1,
        });
      }
    });
    dispatch({
      type: 'onebilling/fetchCreatorList',
      payload: {},
    });
  };

  // 获取列表数据
  getList = (nowPage = 1, pageNum = 10, activeKey, queryParam, isClear = true) => {
    if (isClear) {
      this.setState({
        selectedRows: [],
        selectedRowKeys: [],
      });
    }

    const { dispatch, form } = this.props;
    const pageArg = {
      currentPage: nowPage,
      pageSize: pageNum,
    };
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      // eslint-disable-next-line no-param-reassign
      fieldsValue = queryParam || fieldsValue;
      dispatch({
        type: 'onebilling/updateModelData',
        payload: {
          activeKey,
          formFieldsValue: fieldsValue,
        },
      });
      if (fieldsValue.remark) {
        // eslint-disable-next-line no-param-reassign
        delete fieldsValue.remark;
      }
      const formFieldsValue = {};
      // eslint-disable-next-line no-restricted-syntax
      for (const key in fieldsValue) {
        if (key === 'empName' || key === 'creName') {
          fieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
        }
        if (key == 'createTime') {
          // eslint-disable-next-line no-empty
          if (!fieldsValue[key] || fieldsValue[key].length == 0) {
          } else {
            formFieldsValue.creStartDate = fieldsValue.createTime[0].format('YYYY-MM-DD');
            formFieldsValue.creEndDate = fieldsValue.createTime[1].format('YYYY-MM-DD');
          }
        } else {
          formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
        }
      }

      delete formFieldsValue.createTime;
      let params = {};

      if (checkPermissions('cs:onceCust:listCust') && activeKey == '1') {
        params = {
          ...formFieldsValue,
          pageArg,
          dataSource: '1',
        };
      } else if (checkPermissions('cs:onceCust:listCust')) {
        params = {
          ...formFieldsValue,
          pageArg,
        };
      } else {
        params = {
          ...formFieldsValue,
          pageArg,
          // dataSource: '3',
        };
      }
      dispatch({
        type: 'onebilling/getListOnceBill',
        payload: {
          activeKey,
          params,
        },
      });
    });
  };

  // 查看详情
  goDetails = id => {
    router.push(`/chargemanage/onebilling/detail?onceFeeId=${id}`);
  };

  // 作废询问框
  goVoid = (onceFeeId, feeSta, record) => {
    const {
      dispatch,
      data: { pagination },
    } = this.props;
    this.setState({
      tovoidRecord: record,
    });

    if (record.dataSource == 2 || record.dataSource == 3) {
      this.setState({ selectedRowKeys: [onceFeeId], feeStaId: feeSta, modalVisible: true });
    } else {
      this.setState({ selectedRowKeys: [onceFeeId] });
      // eslint-disable-next-line no-underscore-dangle
      const _this = this;
      confirm({
        icon: <QuestionCircleOutlined />,
        title: `你确定要作废吗？`,
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        style: { top: 200 },
        onOk() {
          dispatch({
            type: 'onebilling/toVoid',
            payload: {
              activeKey: _this.state.activeKey,
              feeSta,
              dataSource: record.dataSource,
              onceFeeId,
            },
            callback: res => {
              if (res.success) {
                message.success(`${res.message || '作废成功！'}`);
                _this.getList(pagination.current, pagination.pageSize, _this.state.tabStatus);
                _this.setState({ selectedRowKeys: [] });
              } else {
                message.warning(`${res.message || '作废失败！'}`);
                _this.setState({ selectedRowKeys: [] });
              }
            },
          });
        },

        onCancel() {
          _this.setState({ selectedRowKeys: [] });
        },
      });
    }
  };

  // 发送财务
  goFinance = () => {
    message.warning(`努力开发中。。。`);
  };

  // 查询
  searchList = e => {
    e.preventDefault();
    const { form } = this.props;
    const { tabStatus } = this.state;
    form.validateFieldsAndScroll((err, values) => {
      // eslint-disable-next-line no-restricted-syntax
      for (const key in values) {
        if (key == 'createTime') {
          // eslint-disable-next-line no-empty
          if (!values[key] || values[key].length == 0) {
          }
        } else if (!values[key]) {
          this.setState({ [key]: null, selectedRows: [], selectedRowKeys: [] });
        } else if (values[key].key) {
          this.setState({ [key]: values[key].key, selectedRows: [], selectedRowKeys: [] });
        } else {
          this.setState({ [key]: values[key], selectedRows: [], selectedRowKeys: [] });
        }
      }
      setTimeout(() => {
        this.getList(1, 10, tabStatus);
      }, 0);
    });
  };

  // 点击详情
  goDetail = e => {
    const { isfmmanage, ischargemanage } = this.state;
    if (isfmmanage == 1) {
      router.push(`/fmmanage/onebilling/employeedetail?onceFeeId=${e}`);
    } else if (ischargemanage == 1) {
      router.push(`/chargemanage/onebilling/employeedetail?onceFeeId=${e}`);
    }
  };

  // 点击修改
  updateEmployee = e => {
    const { isfmmanage, ischargemanage } = this.state;
    if (isfmmanage == 1) {
      router.push(`/fmmanage/onebilling/employeeupdate?onceFeeId=${e}`);
    } else if (ischargemanage == 1) {
      router.push(`/chargemanage/onebilling/employeeupdate?onceFeeId=${e}`);
    }
  };

  // 点击新增
  addsupp = () => {
    const { isfmmanage, ischargemanage } = this.state;
    if (isfmmanage == 1) {
      router.push('/fmmanage/onebilling/employeeadd');
    } else if (ischargemanage == 1) {
      router.push('/chargemanage/onebilling/employeeadd');
    }
  };

  // 重置查询
  resetSearch = () => {
    const { form, dispatch } = this.props;
    dispatch({
      type: 'onebilling/updateModelData',
      payload: {
        formFieldsValue: {},
      },
    });
    form.resetFields();
    form.setFieldsValue({ createTime: null });
  };

  // 复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRowKeys, selectedRows });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { activeKey } = this.props;
    this.getList(pagination.current, pagination.pageSize, activeKey, undefined, false);
  };

  // 作废确定
  submitData = flag => {
    const {
      form,
      dispatch,
      data: { pagination },
    } = this.props;
    const { activeKey, tovoidRecord, feeStaId, selectedRowKeys } = this.state;
    const getFields = form.getFieldsValue();
    // eslint-disable-next-line no-underscore-dangle
    const _this = this;
    this.setState({ modalVisible: true });
    if (getFields.remark == null || getFields.remark == '') {
      message.warning('备注信息不能为空');
    } else if (tovoidRecord.remark) {
      const remarks = tovoidRecord.remark + getFields.remark;
      dispatch({
        type: 'onebilling/toVoid',
        payload: {
          activeKey,
          feeSta: feeStaId,
          remark: remarks,
          dataSource: tovoidRecord.dataSource,
          onceFeeId: selectedRowKeys[0],
        },
        callback: res => {
          if (res.success) {
            message.success(`${res.message || '作废成功！'}`);
            _this.getList(pagination.current, pagination.pageSize, _this.state.tabStatus);
            _this.setState({ selectedRowKeys: [] });
            this.setState({
              modalVisible: !!flag,
            });
          } else {
            message.warning(`${res.message || '作废失败！'}`);
          }
        },
      });
    } else {
      const remarks = getFields.remark;
      dispatch({
        type: 'onebilling/toVoid',
        payload: {
          activeKey,
          feeSta: feeStaId,
          remark: remarks,
          dataSource: tovoidRecord.dataSource,
          onceFeeId: selectedRowKeys[0],
        },
        callback: res => {
          if (res.success) {
            message.success(`${res.message || '作废成功！'}`);
            _this.getList(pagination.current, pagination.pageSize, _this.state.tabStatus);
            _this.setState({ selectedRowKeys: [] });
            this.setState({
              modalVisible: !!flag,
            });
          } else {
            message.warning(`${res.message || '作废失败！'}`);
          }
        },
      });
    }
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  // 标记已收费
  markCharged = () => {
    const { selectedRowKeys, selectedRows } = this.state;
    if (selectedRowKeys.length === 0) {
      message.warning('请选择数据进行操作！');
      return;
    }
    const selectKey = [];
    let billType = null;
    // eslint-disable-next-line array-callback-return
    selectedRows.map(item => {
      selectKey.push({ feeSta: item.feeSta, feeWay: item.feeWay });
    });
    // eslint-disable-next-line array-callback-return
    selectKey.map(items => {
      if (items.feeSta === 1 && items.feeWay === 1) {
        billType = 1;
      } else {
        billType = 2;
      }
    });
    if (billType === 1) {
      this.setState({
        isSign: true,
      });
    } else {
      message.warning(`所选数据非"待收费"或收费方式为"合并账单收费"，不可标记已收费`);
      this.setState({
        isSign: false,
      });
    }
  };

  // 标记已收费提交
  submark = () => {
    const { selectedRowKeys, activeKey } = this.state;
    const {
      dispatch,
      data: { pagination },
    } = this.props;
    if (activeKey == '2') {
      dispatch({
        type: 'onebilling/markModelData',
        payload: { onceFeeIds: selectedRowKeys },
        callback: res => {
          if (res.success) {
            if (res.data.defeatNum == '0' && res.data.succeeNum != '0') {
              message.success('标记成功！');
              this.setState({
                selectedRowKeys: [],
                selectedRows: [],
                isSign: false,
              });
              this.getList(pagination.current, pagination.pageSize, activeKey);
            }
          } else {
            message.warning(res.message || '标记失败');
          }
        },
      });
    } else if (activeKey == '1') {
      dispatch({
        type: 'onebilling/empModelData',
        payload: { onceFeeIds: selectedRowKeys },
        callback: res => {
          if (res.success) {
            if (res.data.defeatNum == '0' && res.data.succeeNum != '0') {
              message.success('标记成功！');
              this.setState({
                selectedRowKeys: [],
                selectedRows: [],
                isSign: false,
              });
              this.getList(pagination.current, pagination.pageSize, activeKey);
            } else {
              this.setState({
                selectedRowKeys: [],
                selectedRows: [],
                isSign: false,
              });
            }
          } else {
            this.setState({
              selectedRowKeys: [],
              selectedRows: [],
            });
            message.warning(res.message || '标记失败');
          }
        },
      });
    } else {
      dispatch({
        type: 'onebilling/suppModelData',
        payload: { onceFeeIds: selectedRowKeys },
        callback: res => {
          if (res.success) {
            if (res.data.defeatNum == '0' && res.data.succeeNum != '0') {
              message.success('标记成功！');
              this.setState({
                isSign: false,
                selectedRowKeys: [],
                selectedRows: [],
              });
              this.getList(pagination.current, pagination.pageSize, activeKey);
            } else {
              this.setState({
                selectedRowKeys: [],
                selectedRows: [],
                isSign: false,
              });
            }
          } else {
            this.setState({
              selectedRowKeys: [],
              selectedRows: [],
            });
            message.warning(res.message || '标记失败');
          }
        },
      });
    }

    this.setState({
      isSign: false,
    });
  };

  // 隐藏标记已收费模态框
  closeUnmark = () => {
    this.setState({
      isSign: false,
    });
  };

  // 标记成功的关闭
  handleCancel = () => {
    const { activeKey } = this.state;
    const {
      data: { pagination },
    } = this.props;
    this.getList(pagination.current, pagination.pageSize, activeKey);
  };

  // 切换页签
  changeTabPane = activeKey => {
    this.resetSearch();
    const { dispatch } = this.props;
    // const { nowPage, pageNum } = this.state;
    dispatch({
      type: 'onebilling/updateModelData',
      payload: { expandForm: false },
    });
    router.push(`/chargemanage/onebilling/index?activeKey=${activeKey}`);
    const { tabList } = this.state;
    // eslint-disable-next-line array-callback-return
    tabList.map((item, index) => {
      if (index == activeKey) {
        // eslint-disable-next-line no-param-reassign
        item.flg = false;
      }
    });
    this.setState(
      // eslint-disable-next-line react/no-unused-state
      { activeKey, tabStatus: activeKey, selectedRowKeys: [], selectedRows: [] },
      () => {
        this.getList(1, 10, activeKey);
      }
    );
  };

  // 查询表格布局
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'onebilling/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  // 展开收齐
  toggleFormtwo = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'onebilling/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  // 下载
  export = () => {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: '温馨提示',
        content: '如果不选择列表数据，则默认导出当前条件下所有数据',
        okText: '导出',
        cancelText: '取消',
        onOk: () => {
          this.exportExcel();
        },
      });
    } else {
      this.exportExcel();
    }
  };

  // 导出excel
  exportExcel = () => {
    const { activeKey, selectedRowKeys } = this.state;
    const { form } = this.props;
    let excel = '';
    if (activeKey == 2) {
      excel = '/csApi/oncefeeFile/exportOnceCust';
    } else if (activeKey == 1) {
      excel = '/csApi/oncefeeFile/exportOnceEmp';
    } else if (activeKey == 3) {
      excel = '/csApi/oncefeeFile/exportOnceSupp';
    } else if (activeKey == 4) {
      excel = '/csApi/onceWait/exportOnceSupp';
    }

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      // eslint-disable-next-line no-param-reassign
      if (fieldsValue.remark) {
        // eslint-disable-next-line no-param-reassign
        delete fieldsValue.remark;
      }
      const formFieldsValue = {};
      // eslint-disable-next-line no-restricted-syntax
      for (const key in fieldsValue) {
        if (key == 'createTime') {
          // eslint-disable-next-line no-empty
          if (!fieldsValue[key] || fieldsValue[key].length == 0) {
          } else {
            formFieldsValue.creStartDate = fieldsValue.createTime[0].format('YYYY-MM-DD');
            formFieldsValue.creEndDate = fieldsValue.createTime[1].format('YYYY-MM-DD');
          }
        } else {
          formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
        }
      }
      const params = {
        onceFeeIds: selectedRowKeys,
        ...formFieldsValue,
      };
      downloadFile(params, excel, 'POST');
    });
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const { dispatch } = this.props;
    const { queryParam } = location;
    dispatch({
      type: 'onebilling/updateModelData',
      payload: {
        expandForm: false,
        activeKey: '2',
        data: {
          pagination: {
            current: 1,
            pageSize: 10,
            total: 10,
          },
        },
      },
    });
    await this.resetSearch();
    let activeKeys = null;
    if (checkPermissions('cs:onceCust:listCust')) {
      activeKeys = urlParse(location.search).activeKey ? urlParse(location.search).activeKey : '2';
    } else {
      // eslint-disable-next-line no-redeclare
      activeKeys = urlParse(location.search).activeKey ? urlParse(location.search).activeKey : '1';
    }
    dispatch({
      type: 'onebilling/updateModelData',
      payload: {
        activeKey: activeKeys,
        tabStatus: activeKeys,
      },
    });

    if (checkPermissions('cs:onceCust:listCust')) {
      dispatch({
        type: 'onebilling/updateModelData',
        payload: {
          activeKey: '2',
        },
      });
      await this.resetSearch();
      await this.getList(1, 10, activeKeys, queryParam);
    } else if (checkPermissions('cs:onceSupp:suppList')) {
      dispatch({
        type: 'onebilling/updateModelData',
        payload: {
          activeKey: '3',
        },
      });
      await this.resetSearch();
      await this.getList(1, 10, activeKeys);
    } else {
      dispatch({
        type: 'onebilling/updateModelData',
        payload: {
          activeKey: '1',
          tabStatus: '1',
        },
      });
      await this.resetSearch();
      await this.getList(1, 10, activeKeys);
    }
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  render() {
    const { loading, data, formFieldsValue, dictCode, form } = this.props;
    const { getFieldDecorator } = form;
    const {
      selectedRowKeys,
      modalVisible,
      selectedRows,
      statusList,
      isSign,
      tabStatus,
      activeKey,
    } = this.state;
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
    const columns = [
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '产品名称',
        dataIndex: 'pdName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}`,
      },
      {
        title: '收费总金额',
        dataIndex: 'feeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => text || (text === 0 ? 0 : '--'),
      },
      {
        title: '状态',
        dataIndex: 'feeSta',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          // eslint-disable-next-line consistent-return
          // eslint-disable-next-line array-callback-return
          statusList.map(status => {
            if (status.itemCode == val) {
              return (
                <Badge key={status.itemCode} status={status.statusStyle} text={status.itemName} />
              );
            }
          }),
      },
      {
        title: '收费方式',
        dataIndex: 'feeWayName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '创建时间',
        dataIndex: 'creTime',
        sorter: (a, b) => new Date(b.createTime) - new Date(a.createTime),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => moment(val).format('YYYY-MM-DD HH:mm') || '无',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => {
          if (record.feeSta == 1 && record.feeWay == 1) {
            // 待收费，单独收费
            return (
              <span>
                <a
                  href=" javascript:;"
                  onClick={() =>
                    router.push(
                      `/chargemanage/onebilling/customerdetail?onceFeeId=${record.onceFeeId}`
                    )
                  }
                >
                  查看
                </a>
                <Divider type="vertical" />
                <Dropdown
                  overlay={
                    <Menu>
                      {checkPermissions('cs:onceCust:updateSubmit') && (
                        <Menu.Item
                          key="update"
                          onClick={() =>
                            router.push(
                              `/chargemanage/onebilling/customerupdate?onceFeeId=${
                                record.onceFeeId
                              }`
                            )
                          }
                        >
                          修改
                        </Menu.Item>
                      )}
                      <Menu.Item
                        key="delete"
                        onClick={() => this.goVoid(record.onceFeeId, record.feeSta, record)}
                      >
                        作废
                      </Menu.Item>
                    </Menu>
                  }
                >
                  <a>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
            );
          }
          if (record.feeSta == 1 && record.feeWay == 2) {
            // 待收费，合并账单收费
            return (
              <span>
                <a
                  href=" javascript:;"
                  onClick={() =>
                    router.push(
                      `/chargemanage/onebilling/customerdetail?onceFeeId=${record.onceFeeId}`
                    )
                  }
                >
                  查看
                </a>
                <Divider type="vertical" />
                <Dropdown
                  overlay={
                    <Menu>
                      {checkPermissions('cs:onceCust:updateSubmit') && (
                        <Menu.Item
                          key="update"
                          onClick={() =>
                            router.push(
                              `/chargemanage/onebilling/customerupdate?onceFeeId=${
                                record.onceFeeId
                              }`
                            )
                          }
                        >
                          修改
                        </Menu.Item>
                      )}
                      {checkPermissions('cs:onceCust:updataSta') && (
                        <Menu.Item
                          key="delete"
                          onClick={() => this.goVoid(record.onceFeeId, record.feeSta, record)}
                        >
                          作废
                        </Menu.Item>
                      )}
                    </Menu>
                  }
                >
                  <a>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
            );
          }
          return (
            <a
              href=" javascript:;"
              onClick={() =>
                router.push(`/chargemanage/onebilling/customerdetail?onceFeeId=${record.onceFeeId}`)
              }
            >
              查看
            </a>
          );
        },
      },
    ];
    const columns2 = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '产品名称',
        dataIndex: 'pdName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}`,
      },
      {
        title: '收费金额',
        dataIndex: 'feeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: feeAmo => feeAmo || (feeAmo === 0 ? 0 : '--'),
      },
      {
        title: '状态',
        dataIndex: 'feeSta',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          // eslint-disable-next-line array-callback-return
          statusList.map(status => {
            if (status.itemCode == val) {
              return (
                <Badge key={status.itemCode} status={status.statusStyle} text={status.itemName} />
              );
            }
          }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '创建时间',
        dataIndex: 'creTime',
        sorter: (a, b) => new Date(b.createTime) - new Date(a.createTime),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => moment(val).format('YYYY-MM-DD HH:mm') || '无',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => {
          if (record.feeSta == 1) {
            // 待收费
            return (
              <span>
                <a href=" javascript:;" onClick={() => this.goDetail(record.onceFeeId)}>
                  查看
                </a>
                {checkPermissions(['cs:onceEmp:updata', 'cs:onceEmp:updataSta']) && (
                  <Divider type="vertical" />
                )}
                {checkPermissions(['cs:onceEmp:updata', 'cs:onceEmp:updataSta']) && (
                  <Dropdown
                    overlay={
                      <Menu>
                        {checkPermissions('cs:onceEmp:updata') && record.dataSource === 1 && (
                          <Menu.Item
                            key="update"
                            onClick={() => this.updateEmployee(record.onceFeeId)}
                          >
                            修改
                          </Menu.Item>
                        )}
                        {checkPermissions('cs:onceEmp:updataSta') && (
                          <Menu.Item
                            key="delete"
                            onClick={() => this.goVoid(record.onceFeeId, record.feeSta, record)}
                          >
                            作废
                          </Menu.Item>
                        )}
                      </Menu>
                    }
                  >
                    <a>
                      更多 <DownOutlined />
                    </a>
                  </Dropdown>
                )}
              </span>
            );
          }
          return (
            <a href=" javascript:;" onClick={() => this.goDetail(record.onceFeeId)}>
              查看
            </a>
          );
        },
      },
    ];
    const columns3 = [
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '产品名称',
        dataIndex: 'pdName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}`,
      },
      {
        title: '收费总金额',
        dataIndex: 'feeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: feeAmo => feeAmo || (feeAmo === 0 ? 0 : '--'),
      },
      {
        title: '状态',
        dataIndex: 'feeSta',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          // eslint-disable-next-line array-callback-return
          statusList.map(status => {
            if (status.itemCode == val) {
              return (
                <Badge key={status.itemCode} status={status.statusStyle} text={status.itemName} />
              );
            }
          }),
      },
      {
        title: '收费方式',
        dataIndex: 'feeWayName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '创建人',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || '--',
      },
      {
        title: '创建时间',
        dataIndex: 'creTime',
        sorter: (a, b) => new Date(b.createTime) - new Date(a.createTime),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => moment(val).format('YYYY-MM-DD HH:mm') || '无',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => {
          if (record.feeSta == 1 && record.feeWay == 1) {
            // 待收费，单独收费
            return (
              <span>
                <a
                  href=" javascript:;"
                  onClick={() =>
                    router.push(
                      `/chargemanage/onebilling/supplierdetail?onceFeeId=${record.onceFeeId}`
                    )
                  }
                >
                  查看
                </a>
                <Divider type="vertical" />
                <Dropdown
                  overlay={
                    <Menu>
                      {checkPermissions('cs:onceSupp:updateSubmit') && (
                        <Menu.Item
                          key="update"
                          onClick={() =>
                            router.push(
                              `/chargemanage/onebilling/supplierupdate?onceFeeId=${
                                record.onceFeeId
                              }`
                            )
                          }
                        >
                          修改
                        </Menu.Item>
                      )}
                      {checkPermissions('cs:onceSupp:updataSta') && (
                        <Menu.Item
                          key="delete"
                          onClick={() => this.goVoid(record.onceFeeId, record.feeSta, record)}
                        >
                          作废
                        </Menu.Item>
                      )}
                    </Menu>
                  }
                >
                  <a>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
            );
          }
          if (record.feeSta == 1 && record.feeWay == 2) {
            // 待收费，合并账单收费
            return (
              <span>
                <a
                  href=" javascript:;"
                  onClick={() =>
                    router.push(
                      `/chargemanage/onebilling/supplierdetail?onceFeeId=${record.onceFeeId}`
                    )
                  }
                >
                  查看
                </a>
                <Divider type="vertical" />
                <Dropdown
                  overlay={
                    <Menu>
                      {checkPermissions('cs:onceSupp:updateSubmit') && (
                        <Menu.Item
                          key="update"
                          onClick={() =>
                            router.push(
                              `/chargemanage/onebilling/supplierupdate?onceFeeId=${
                                record.onceFeeId
                              }`
                            )
                          }
                        >
                          修改
                        </Menu.Item>
                      )}
                      {checkPermissions('cs:onceSupp:updataSta') && (
                        <Menu.Item
                          key="delete"
                          onClick={() => this.goVoid(record.onceFeeId, record.feeSta, record)}
                        >
                          作废
                        </Menu.Item>
                      )}
                    </Menu>
                  }
                >
                  <a>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </span>
            );
          }

          return (
            <a
              href=" javascript:;"
              onClick={() =>
                router.push(`/chargemanage/onebilling/supplierdetail?onceFeeId=${record.onceFeeId}`)
              }
            >
              查看
            </a>
          );
        },
      },
    ];
    const renderAdvancedForm = (
      // <Card style={{ backgroundColor: '#fafafa' }} bordered={false}>
      <div
        className={styles.tableListForm}
        style={{
          padding: '24px 24px 0 0',
          backgroundColor: '#fafafa',
          width: '100%'
        }}
      >
        <Form layout="inline">
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={8} sm={24}>
              <FormItem {...formItemLayout} label="客户名称" style={{ display: 'block' }}>
                {getFieldDecorator('custId', {
                  rules: [{ required: false }],
                  initialValue: formFieldsValue.custId,
                  // eslint-disable-next-line react/jsx-props-no-multi-spaces
                })(<Customer allowClear />)}
              </FormItem>
            </Col>
            <Col md={8} sm={24}>
              <FormItem {...formItemLayout} label="状态" style={{ display: 'block' }}>
                {getFieldDecorator('feeSta', {
                  rules: [{ required: false, message: '请输入' }],
                  initialValue: formFieldsValue.feeSta,
                })(
                  <HOCSelect
                    placeholder="请输入关键字检索"
                    allowClear
                    showSearch
                    optionFilterProp="children"
                  >
                    {dictCode.ONCE_FEE_STATUS &&
                      dictCode.ONCE_FEE_STATUS.map(options => (
                        <Option key={options.itemCode}>{options.itemName}</Option>
                      ))}
                  </HOCSelect>
                )}
              </FormItem>
            </Col>
            <Col md={8} sm={24}>
              <span>
                <Button type="primary" onClick={() => this.getList(1, 10, activeKey)}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={() => this.toggleForm()}>
                  展开 <DownOutlined />
                </a>
              </span>
            </Col>
          </Row>
        </Form>
      </div>
      // </Card>
    );
    const renderSimpleForm = (
      // <Card style={{ backgroundColor: '#fafafa' }} bordered={false}>
      <div
        className={styles.tableListForm}
        style={{
          // margintop: 4,
          // marginBottom: 16,
          // paddingTop: 16,
          // paddingRight: 16,
          padding: '24px 24px 0 0',
          backgroundColor: '#fafafa',
          width: '100%'
        }}
      >
        <Form layout="inline">
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={8} sm={24}>
              <FormItem {...formItemLayout} label="客户名称" style={{ display: 'block' }}>
                {getFieldDecorator('custId', {
                  rules: [{ required: false }],
                  initialValue: formFieldsValue.custId,
                  // eslint-disable-next-line react/jsx-props-no-multi-spaces
                })(<Customer allowClear />)}
              </FormItem>
            </Col>
            <Col md={8} sm={24}>
              <FormItem {...formItemLayout} label="状态" style={{ display: 'block' }}>
                {getFieldDecorator('feeSta', {
                  rules: [{ required: false, message: '请输入' }],
                  initialValue: formFieldsValue.feeSta,
                })(
                  <HOCSelect
                    placeholder="请输入关键字检索"
                    // onSelect = { this.souState}
                    allowClear
                    // labelInValue
                    showSearch
                    optionFilterProp="children"
                  >
                    {dictCode.ONCE_FEE_STATUS &&
                      dictCode.ONCE_FEE_STATUS.map(options => (
                        <Option key={options.itemCode}>{options.itemName}</Option>
                      ))}
                  </HOCSelect>
                )}
              </FormItem>
            </Col>
            <Col md={8} sm={24}>
              <FormItem label="创建日期" {...formItemLayout} style={{ display: 'block' }}>
                {getFieldDecorator('createTime', {
                  rules: [{ type: 'array', required: false }],
                  initialValue: formFieldsValue.createTime,
                })(
                  <RangePicker
                    placeholder={['开始日期', '结束日期']}
                    style={{ width: '100%' }}
                    format="YYYY-MM-DD"
                  />
                )}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={8} sm={24}>
              <FormItem label="创建人" {...formItemLayout}>
                {getFieldDecorator('creName', {
                  rules: [{ required: false, message: '请输入' }],
                  initialValue: formFieldsValue.creName,
                })(<Input placeholder="请输入" />)}
              </FormItem>
            </Col>
            <Col md={8} sm={24} />
            <Col md={8} sm={24}>
              <div style={{ overflow: 'hidden' }}>
                <span style={{ float: 'right' }}>
                  {/* <Button type="primary" style={{ marginRight: 8 }} onClick={this.searchList}> */}
                  <Button
                    type="primary"
                    style={{ marginRight: 8, marginBottom: 24 }}
                    onClick={() => this.getList(1, 10, activeKey)}
                  >
                    查询
                  </Button>
                  <Button onClick={this.resetSearch}>重置</Button>
                  <a style={{ marginLeft: 8 }} onClick={() => this.toggleForm()}>
                    收起 <UpOutlined />
                  </a>
                </span>
              </div>
            </Col>
          </Row>
        </Form>
      </div>
      // </Card>
    );
    // 向客户收费
    const { expandForm } = this.props;
    const renderForm = expandForm ? renderSimpleForm : renderAdvancedForm;
    const renderForms = expandForm ? renderSimpleForm : renderAdvancedForm;
    const moreMenu = (
      <Menu>
        {checkPermissions('cs:oncefeeFile:exportOnceCust') && (
          <Menu.Item
            onClick={() => {
              this.export();
            }}
          >
            导出
          </Menu.Item>
        )}

        {checkPermissions('cs:onceCust:collectFee') && (
          <Menu.Item onClick={() => this.markCharged()}>标记已收费</Menu.Item>
        )}
      </Menu>
    );

    const empmoreMenu = (
      <Menu>
        {checkPermissions('cs:onceEmp:collectFee') && (
          <Menu.Item
            onClick={() => {
              this.export();
            }}
          >
            导出
          </Menu.Item>
        )}

        {checkPermissions('cs:onceEmp:collectFee') && (
          <Menu.Item onClick={() => this.markCharged()}>标记已收费</Menu.Item>
        )}
      </Menu>
    );

    const suppmoreMenu = (
      <Menu>
        {checkPermissions('cs:oncefeeFile:exportOnceSupp') && (
          <Menu.Item
            onClick={() => {
              this.export();
            }}
          >
            导出
          </Menu.Item>
        )}

        {checkPermissions('cs:onceSupp:collectFee') && (
          <Menu.Item onClick={() => this.markCharged()}>标记已收费</Menu.Item>
        )}
      </Menu>
    );

    const customerCharge = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          {renderForm}
          <Col md={12} sm={24} style={{ marginTop: 16 }}>
            <Authorized authority="cs:onceCust:insertSubmit" noMatch={null}>
              <Button
                type="primary"
                onClick={() => router.push('/chargemanage/onebilling/customeradd')}
              >
                <PlusOutlined />
                新增
              </Button>
            </Authorized>

            {checkPermissions(['cs:oncefeeFile:exportOnceCust', 'cs:onceCust:collectFee']) && (
              <Dropdown overlay={moreMenu}>
                <Button style={{ marginLeft: 8 }}>
                  更多 <DownOutlined />
                </Button>
              </Dropdown>
            )}
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="onceFeeId"
          columns={columns}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 向雇员收费
    const renderAdvancedFormtwo = (
      <div>
        <Row>
          {/* <Card style={{ backgroundColor: '#fafafa' }} bordered={false}> */}
          <div
            className={styles.tableListForm}
            style={{
              padding: '24px 24px 0 0',
              backgroundColor: '#fafafa',
              width: '100%'
            }}
          >
            <Form layout="inline">
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={8} sm={24}>
                  <FormItem {...formItemLayout} label="姓名" style={{ display: 'block' }}>
                    {getFieldDecorator('empName', {
                      rules: [{ required: false }],
                      initialValue: formFieldsValue.empName,
                    })(<Input placeholder="请输入" />)}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem {...formItemLayout} label="状态" style={{ display: 'block' }}>
                    {getFieldDecorator('feeSta', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: formFieldsValue.feeSta,
                    })(
                      <HOCSelect
                        placeholder="请输入关键字检索"
                        allowClear
                        showSearch
                        optionFilterProp="children"
                      >
                        {dictCode.ONCE_FEE_STATUS &&
                          dictCode.ONCE_FEE_STATUS.map(options => (
                            <Option key={options.itemCode}>{options.itemName}</Option>
                          ))}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem>
                    {/* <Button type="primary" style={{ marginRight: 8 }} onClick={this.searchList}> */}
                    <Button
                      type="primary"
                      style={{ marginRight: 8 }}
                      onClick={() => this.getList(1, 10, activeKey)}
                    >
                      查询
                    </Button>
                    <Button onClick={this.resetSearch}>重置</Button>
                    <a style={{ marginLeft: 8 }} onClick={() => this.toggleFormtwo()}>
                      展开 <DownOutlined />
                    </a>
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          {/* </Card> */}
          <Col md={12} sm={24} style={{ margin: '16px 0 0 0' }}>
            <Authorized authority="cs:onceEmp:insertCustEmp" noMatch={null}>
              <Button
                type="primary"
                onClick={() => this.addsupp()}
                style={{ margin: '0 0 16px 0' }}
              >
                <PlusOutlined />
                新增
              </Button>
            </Authorized>

            {checkPermissions('cs:onceEmp:collectFee') && (
              <Dropdown overlay={empmoreMenu} style={{ margin: '0 0 16px 0' }}>
                <Button style={{ marginLeft: 8 }}>
                  更多 <DownOutlined />
                </Button>
              </Dropdown>
            )}
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="onceFeeId"
          columns={columns2}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );

    // 向雇员收费
    const renderSimpleFormtwo = (
      <div>
        <Row>
          <div
            className={styles.tableListForm}
            style={{
              padding: '24px 24px 0 0',
              backgroundColor: '#fafafa',
              width: '100%'
            }}
          >
            <Form layout="inline">
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={8} sm={24}>
                  <FormItem {...formItemLayout} label="姓名" style={{ display: 'block' }}>
                    {getFieldDecorator('empName', {
                      rules: [{ required: false }],
                      initialValue: formFieldsValue.empName,
                    })(<Input placeholder="请输入" />)}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem {...formItemLayout} label="状态" style={{ display: 'block' }}>
                    {getFieldDecorator('feeSta', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: formFieldsValue.feeSta,
                    })(
                      <HOCSelect
                        placeholder="请输入关键字检索"
                        allowClear
                        showSearch
                        optionFilterProp="children"
                      >
                        {dictCode.ONCE_FEE_STATUS &&
                          dictCode.ONCE_FEE_STATUS.map(options => (
                            <Option key={options.itemCode}>{options.itemName}</Option>
                          ))}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem label="创建日期" {...formItemLayout} style={{ display: 'block' }}>
                    {getFieldDecorator('createTime', {
                      rules: [{ type: 'array', required: false }],
                      initialValue: formFieldsValue.createTime,
                    })(
                      <RangePicker
                        placeholder={['开始日期', '结束日期']}
                        style={{ width: '100%' }}
                        format="YYYY-MM-DD"
                      />
                    )}
                  </FormItem>
                </Col>
              </Row>

              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={8} sm={24}>
                  <FormItem label="创建人" {...formItemLayout}>
                    {getFieldDecorator('creName', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: formFieldsValue.creName,
                    })(<Input placeholder="请输入" />)}
                  </FormItem>
                </Col>
                <Col md={8} sm={24} />
                <Col md={8} sm={24}>
                  <span style={{ float: 'right' }}>
                    <Button
                      type="primary"
                      style={{ marginRight: 8, marginBottom: 24 }}
                      onClick={() => this.getList(1, 10, activeKey)}
                    >
                      查询
                    </Button>
                    <Button onClick={this.resetSearch}>重置</Button>
                    <a style={{ marginLeft: 8 }} onClick={() => this.toggleFormtwo()}>
                      收起 <UpOutlined />
                    </a>
                  </span>
                </Col>
              </Row>
            </Form>
          </div>
          <Col md={12} sm={24} style={{ margin: '16px 0 0 0' }}>
            <Authorized authority="cs:onceEmp:insertCustEmp" noMatch={null}>
              <Button
                type="primary"
                onClick={() => this.addsupp()}
                style={{ margin: '0 0 16px 0' }}
              >
                <PlusOutlined />
                新增
              </Button>
            </Authorized>

            {checkPermissions(['cs:onceEmp:collectFee', 'cs:onceEmp:collectFee']) && (
              <Dropdown overlay={empmoreMenu} style={{ margin: '0 0 16px 0' }}>
                <Button style={{ marginLeft: 8 }}>
                  更多 <DownOutlined />
                </Button>
              </Dropdown>
            )}
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="onceFeeId"
          columns={columns2}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 向供应商收费
    const supplierCharge = (
      <div>
        <Row style={{ marginBottom: '16px' }}>
          {renderForms}
          <Col md={12} sm={24} style={{ marginTop: 16 }}>
            <Button
              type="primary"
              onClick={() => router.push('/chargemanage/onebilling/supplieradd')}
            >
              <PlusOutlined />
              新增
            </Button>
            {checkPermissions(['cs:oncefeeFile:exportOnceSupp', 'cs:onceSupp:collectFee']) && (
              <Dropdown overlay={suppmoreMenu}>
                <Button style={{ marginLeft: 8 }}>
                  更多 <DownOutlined />
                </Button>
              </Dropdown>
            )}
          </Col>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="onceFeeId"
          columns={columns3}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );

    // 获取页签组件
    const renderFormtwo = expandForm ? renderSimpleFormtwo : renderAdvancedFormtwo;
    // eslint-disable-next-line no-shadow
    const getTabPane = activeKey => {
      if (activeKey == 1) {
        return customerCharge;
      }
      if (activeKey == 2) {
        return renderFormtwo;
      }
      if (activeKey == 3) {
        return supplierCharge;
      }

      return <div />;
    };
    return (
      <PageHeaderWrapper>
        <Card bordered={false} className={styles.tabCard}>
          <Tabs activeKey={tabStatus} onChange={this.changeTabPane}>
            {checkPermissions('cs:onceCust:listCust') && (
              <TabPane tab="向客户收费" key={2}>
                {getTabPane(1)}
              </TabPane>
            )}
            {checkPermissions('cs:onceEmp:listEmp') && (
              <TabPane tab="向雇员收费" key={1}>
                {getTabPane(2)}
              </TabPane>
            )}

            {checkPermissions('cs:onceSupp:suppList') && (
              <TabPane tab="向供应商收费" key={3}>
                {getTabPane(3)}
              </TabPane>
            )}
          </Tabs>
        </Card>
        <Modal
          width={700}
          title="作废"
          visible={modalVisible}
          okText="确定"
          cancelText="取消"
          onOk={() => this.submitData(false)}
          onCancel={() => this.handleModalVisible(false)}
          destroyOnClose
        >
          <Form>
            <Row className={styles.labelStyle}>
              <FormItem style={{ margin: '0 0 5% 5%' }} label="备注">
                {getFieldDecorator('remark', {
                  rules: [{ required: modalVisible, message: '请输入' }],
                })(<TextArea rows={4} maxLength={65} />)}
              </FormItem>
            </Row>
          </Form>
        </Modal>

        <Modal
          visible={isSign}
          onOk={this.submark}
          onCancel={this.closeUnmark}
          confirmLoading={loading}
          closable={false}
          destroyOnClose
          width="450px"
          footer={[
            <Button key="back" onClick={this.closeUnmark}>
              取消
            </Button>,
            <Button key="submit" type="primary" onClick={this.submark}>
              确认
            </Button>,
          ]}
        >
          <div style={{ margin: '15px 15px 0 15px' }}>
            <ExclamationCircleOutlined style={{ fontWeight: 800, color: '#EEC900', fontSize: '20px' }} />
            <span style={{ fontSize: '18px', fontWeight: 800, margin: '20px 0 0 10px' }}>
              已选择{selectedRowKeys.length}条数据，是否确认全部标记已收费
            </span>
            <p style={{ color: '#A19095', margin: '10px 0 0 28px' }}>
              请线下和财务核实每笔账单款项已到款，标记后不可取消标记。
            </p>
          </div>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}
// eslint-disable-next-line no-class-assign
CustomerInfoManage = Form.create({})(CustomerInfoManage);
export default CustomerInfoManage;
